<html lang="en"><head>
	<meta charset="UTF-8">
	<title>济南日报报业集团党建管理教育平台</title>
	<style type="text/css">


body{
	background: url('img/bg.jpg') no-repeat center top;
}
	.wrap{
		width: 850px;
		height: auto;
		margin:10% auto 0;

	}
		.item {
		  width: 234px; /* Set the size of the progress bar */
		  height: 234px;
		  position: relative; /* Enable clipping */
		  clip: rect(0px, 224px, 224px, 100px); /* Hide half of the progress bar */
		 border-radius: 50%;
		 float: left;
		 margin: 2%;
		 text-align: center;
		}

		.item img{
			padding-top: 25%; 
			cursor: pointer;
		}
		/* Set the sizes of the elements that make up the progress bar */
		.circle {
		  width: 224px;
		  height: 224px;
		  /*border: 10px solid green;*/
		  border-radius: 50%;
		  position: absolute;
		  clip: rect(0px, 115px, 234px, 0px);
		}

		/* Using the data attributes for the animation selectors. */
		/* Base settings for all animated elements */
		div[data-anim~=base] {
		  -webkit-animation-iteration-count: 1;  /* Only run once */
		  -webkit-animation-fill-mode: forwards; /* Hold the last keyframe */
		  -webkit-animation-timing-function:linear; /* Linear animation */
		}

		.item[data-anim~=wrapper] {
		  -webkit-animation-duration: 0.01s; /* Complete keyframes asap */
		  -webkit-animation-delay: .1s; /* Wait half of the animation */
		  -webkit-animation-name: close-wrapper; /* Keyframes name */
		}

		.circle[data-anim~=left]  {
		  -webkit-animation-duration: .5s; /* Full animation time */
		  /*-webkit-animation-name: left-spin;*/
		 border:5px solid rgba(255,255,255,0.2);
		     clip: rect(0px, 280px, 280px, 0px);
		   -webkit-transform: rotate(-90deg);
		   background: transparent;
		   z-index: 99;
		}

		.circle[data-anim~=right]{
			 border:5px solid transparent;
			 z-index: 0;
		}

		.item:hover .circle[data-anim~=right] {
			border:5px solid #FFF;
		  -webkit-animation-duration: .5s; /* Half animation time */
		  -webkit-animation-name: right-spin;
		}

		/* Rotate the right side of the progress bar from 0 to 180 degrees */
		@-webkit-keyframes right-spin {
		  from {
		    -webkit-transform: rotate(-90deg);
		  }
		  to {
		    -webkit-transform: rotate(90deg);
		  }
		}
		/* Rotate the left side of the progress bar from 0 to 360 degrees */
		@-webkit-keyframes left-spin {
		  from {
		    -webkit-transform: rotate(-180deg);
		  }
		  to {
		    -webkit-transform: rotate(180deg);
		  }
		}
		/* Set the wrapper clip to auto, effectively removing the clip */
		@-webkit-keyframes close-wrapper {
		  to {
		    clip: rect(auto, auto, auto, auto);
		  }
		}
	</style>
<body>


<div class="wrap">
	<div class="item" data-anim="base wrapper">
		<a href="/backend/web/admin/business/transfer#5"><div class="circle" data-anim="base left"></div></a>
		<div class="circle" data-anim="base right"></div>
		<img src="img/dwgl.png" alt="">
	</div>
 
   <div class="item" data-anim="base wrapper">
		<a href="/backend/web/admin/user/index#5"><div class="circle" data-anim="base left"></div></a>
		<div class="circle" data-anim="base right"></div>
		<img src="img/dygl.png" alt="">
	</div>

	   <div class="item" data-anim="base wrapper">
		<a href="/backend/web/content/index/index#4"><div class="circle" data-anim="base left"></div></a>
		<div class="circle" data-anim="base right"></div>
		<img src="img/dyzj.png" alt="">
	</div>

	   <div class="item" data-anim="base wrapper">
		<a href="/backend/web/admin/three/#3"><div class="circle" data-anim="base left"></div></a>
		<div class="circle" data-anim="base right"></div>
		<img src="img/sanhuiyike.png" alt="">
	</div>

	   <div class="item" data-anim="base wrapper">
		<a href="/web/" target="_blank"><div class="circle" data-anim="base left"></div></a>
		<div class="circle" data-anim="base right"></div>
		<img src="img/ykt.png" alt="">
	</div>

	   <div class="item" data-anim="base wrapper">
		<a href="/backend/web/admin/negative/#2"><div class="circle" data-anim="base left"></div></a>
		<div class="circle" data-anim="base right"></div>
		<img src="img/zfqd.png" alt="">
	</div>


	</div>
</body></html>